<template>
  <div class="User_List_box">
    <!-- <div class="Auditing_top"> -->
    <!-- <el-form :inline="true" :model="formInline" style="width: 100%" class="demo-form-inline"> -->
    <!-- <el-form-item label="审批人">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
    </el-form-item>-->
    <!-- <el-form-item label="活动区域">
          <el-select v-model="formInline.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
    </el-form-item>-->
    <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>-->
    <!-- </el-form> -->
    <!-- </div> -->
    <el-button type="primary" :loading="loading_status" @click="refresh_data">刷新</el-button>
    <div class="Auditing_footer">
      <el-table :data="listdata.slice((page - 1) * limit, page * limit)" style="width: 100%">
        <el-table-column prop="userId" label="用户id" width="150"></el-table-column>
        <el-table-column prop="username" label="用户名" width="120"></el-table-column>
        <el-table-column prop="phone" label="电话号码" width="170"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="170"></el-table-column>
        <el-table-column prop="schoolId" label="学校" width="180"></el-table-column>

        <el-table-column prop="createdAt" label="申请时间" width="200"></el-table-column>
        <!-- <el-table-column prop="city" label="市区" width="120"></el-table-column> -->
        <!-- <el-table-column prop="address" label="地址" width="300"></el-table-column> -->
        <!-- <el-table-column prop="zip" label="邮编" width="120"></el-table-column> -->
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <div>
              <!-- <el-radio-group v-model="scope.row.status" size="medium">

                <el-radio-button
                  label="pending"
                  @click.native="handleeditClick(scope.row.userId,'pending')"
                >待定</el-radio-button>
                <el-radio-button
                  label="approved"
                  @click.native="handleeditClick(scope.row.userId,'approved')"
                >通过</el-radio-button>
                <el-radio-button
                  label="rejected"
                  @click.native="handleeditClick(scope.row.userId,'rejected')"
                >拒绝</el-radio-button>
                <el-radio-button
                  label="delete"
                  @click.native="handleeditClick(scope.row.userId,'delete')"
                >删除</el-radio-button>
              </el-radio-group>-->
              <el-button @click="handleeditClick(scope.row)">修改信息</el-button>
            </div>&nbsp;
            &nbsp;
            <!-- <el-button>否决</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :currentPage="page"
        :page-size="limit"
        :page-sizes="[5, 10]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="TableDatatoal"
        @size-change="handleSizeChange"
        @current-change="CurrentChange"
      ></el-pagination>
    </div>
    <!-- 添加用户的对话框 -->
    <!-- <el-dialog title="添加用户" :visible.sync="dialogVisible" width="50%" @close="addDialogClosed">

      <el-form ref="addFormRef" :model="addForm" :rules="addFormRules" label-width="70px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="addForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="addForm.mobile"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addUser">确 定</el-button>
      </span>
    </el-dialog>-->

    <!-- 修改用户的对话框 -->
    <!-- <el-dialog
          title="修改用户"
          :visible.sync="editDialogVisible"
          width="50%"
          @close="editDialogClosed">
          <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
            <el-form-item label="用户名">
              <el-input v-model="editForm.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editForm.email"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="editForm.mobile"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
          </span>
    </el-dialog>-->
    <el-dialog title="用户修改" :visible.sync="dialogFormVisible">
      <el-form :model="edit_form">
        <el-form-item label="用户id" :label-width="formLabelWidth">
          <el-input v-model="edit_form.userId" autocomplete="off"   :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="edit_form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="edit_form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="edit_form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="学校" :label-width="formLabelWidth">
          <el-input v-model="edit_form.schoolId" autocomplete="off"></el-input>
        </el-form-item>
        <!-- <el-form-item label="活动名称" :label-width="formLabelWidth">
          <el-input v-model="edit_form.phone" autocomplete="off"></el-input>
        </el-form-item> -->

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit_conment">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

  <script>
import { getUserListAll, setUserApprove ,editUserinfo} from "@/api/login.js"; //引入
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: ""
      },
      radio: "pending",
      isShow: false,
      limit: 5,
      page: 1,
      listdata: [],
      dialogFormVisible: false,
      loading_status: false,
      formLabelWidth: "120px",
      edit_form: {
        userId: "",
        username: "",
        email: "",
        phone: "",
        schoolId: "",
        createdAt: "",
      },
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
    };
  },
  computed: {
    TableDatatoal() {
      return this.listdata.length;
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleeditClick(row) {
      // setUserApprove(myObj).then(res => {
      //   console.log(res);
      //   this.getdata();
      // });
      let {userId,username,email,phone,schoolId,createdAt} = row;
      this.edit_form = {userId,username,email,phone,schoolId,createdAt};
      this.dialogFormVisible = true;
      // console.log(this.form);
      // console.log(row);
      console.log("this.edit_form",this.edit_form);
    },
    submit_conment() {
      // setUserApprove(myObj).then(res => {
        //   console.log(res);
        // });
        editUserinfo(this.edit_form).then(res => {
          console.log(res);
          this.$message({
          message: "修改信息成功",
          type: "success"
        });
          this.getdata();
        });
      this.dialogFormVisible = false;
      console.log("this.form", this.form);
      // this.getdata();
      console.log("this.edit_form",this.edit_form);

      // console.log(row);
    },
    handleSizeChange(val) {
      this.limit = val;
    },
    CurrentChange(val) {
      this.page = val;
    },
    //     TableDatatoal =  {
    //   // 该函数的返回值就是计算属性的值
    //   return list.listdata.length;
    // }
    // 刷新
    refresh_data() {
      this.loading_status=true
      // 延时
      setTimeout(() => {
        // console.log("你好");
        this.loading_status=false
        this.$message({
          message: "刷新信息成功",
          type: "success"
        });
        this.getdata();
      },2000)

    },
    // 获取数据
    async getdata() {
      console.log("kdsf");
      await getUserListAll().then(res => {
        // console.log(res);
        let { data } = res;
        // console.log(data);
        this.listdata = data;
        console.log(this.listdata);
      });
    }
  },
  mounted() {
    this.getdata();
  }
};
</script>

<style scoped>
.User_List_box {
  padding: 20px;
  width: 100%;
}
</style>